<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>代理商充电保</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/assets/base/data/css/style.css">
    <link rel="stylesheet" href="/assets/base/data/css/mobiscroll.custom-3.0.0-beta2.min.css">
</head>
<body>
<div class="wraper">
    <div class="header2 header white text-center">
        <a href="#" class="iconfont icon-chevron-left white"></a>
        <div class=" font-16">关注趋势</div>
    </div>
    <div class="padding-12 flex-between">
        <div class="day">
            <input id="month" type="text" />
            <div class="kongbai"></div>
        </div>
        <div class="iconfont icon-riqi1 gray2"></div>
    </div>
    <div id="container" style="min-width:100%;height:212px"></div>
    <div class="content">
        <div class="box flex-center">
            <span class="iconfont icon-mingxishuju icon blue"></span>
            <span>明细数据</span>
        </div>
        <div class="box2 gray">
            <div class="data flex-between padding-0">
                <div>2017-10-31</div>
                <div>
                    50人
                </div>
            </div>
            <div class="data flex-between padding-0">
                <div>2017-10-30</div>
                <div>
                    50人
                </div>
            </div>
            <div class="data flex-between padding-0">
                <div>2017-10-29</div>
                <div>
                    50人
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="/assets/base/data/js/jquery-2.1.0.min.js"></script>
<script src="/assets/base/data/js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
<script src="/assets/base/data/js/highcharts.js"></script>
<script>
    $(function () {
        $('#month').mobiscroll().date({
            theme: 'android-holo-light',//皮肤样式
            lang: 'zh',//中文
            display: 'bottom',//位于底部
            dateFormat: 'yyyy/mm'//格式
        });
    });
    $('.icon-riqi1').click(function () {
       $('#month').click();
    });
    $(function () {
        var date=new Date();
        var month=date.getMonth()+1;
        var year=date.getFullYear();
        if (month<10){
            month='0'+month;
        }
        var time=year+'/'+month;
        $('#month').val(time);
    });
    $(function () {
        $('#container').highcharts({
            title: {
                text: '新增关注数',
                style:{"color": "#2a2a2a", "fontSize": "14px" }

            },
            subtitle: {
                text: ''
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            xAxis: {
                tickWidth: 0, // 主刻度的宽度
                categories: ['10/1', '10/2','10/3', '10/4', '10/5','10/6', '10/7','10/8', '10/9', '10/10','10/11', '10/12','10/13', '10/14', '10/15','10/16', '10/17','10/18', '10/19', '10/20','10/21', '10/22','10/23', '10/24', '10/25','10/26', '10/27','10/28', '10/29', '10/30'],
                labels: {
                    step: 6,
                    align: 'left',
                    x: -2
                }
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                series: {
                    marker: {
                        enabled: false /*数据点是否显示*/

                    }
                }
            },
            tooltip: {
                valueSuffix: ''
            },
            colors: [
                "#27a7e4"
            ],
            series: [{
                name: '',
                data: [50,60,70, 50,120,50,60,70, 50,70,50,30,10, 100,70,50,60,70, 50,70,110,60,70, 50,70,50,60,70, 50,70]
            }]
        });
    });
</script>
</html>